<template>
  <div>
      <p>歌曲详情-{{$route.params.name}}</p>
      <p>新歌速递：
          <router-link to="/detail/vue">vue之歌</router-link>
      </p>
  </div>
</template>

<script>
export default {
    mounted() {
        console.log('请求哪个歌曲的详情：',this.$route.params.name);
    },
    // 页面跳转前后，使用的是同一个组件，vue会复用组件而不是先销毁再创建。
    // 副作用生命周期构造函数不再执行，里面的代码也不执行。
    // 想要执行一些代码，就换到路由守卫中beforeRouteUpdate
    beforeRouteUpdate(to, from, next) {
        console.log('请求哪个歌曲的详情：', to.params.name);
        next()
    }
}
</script>

<style>

</style>